<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue基本用法</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <!--<script>-->
        <!--window.onload = function () {-->
            <!--let vue = new Vue({-->
                <!--el: "#d1", // 指定关联的元素,即表示Vue的作用域-->
                <!--data: {msg: "Hello Vue"}-->
            <!--});-->
        <!--}-->
    <!--</script>-->
</head>
<body>
<div id="d1">
    <!--
        使用插值表达式进行数据的展示
        插值表达式使用两对大括号表示{{ 表达式内容 }}
     -->
    <span id="s1">{{ msg }}</span><br/>
    <!--
        使用Vue指令进行数据的展示
        v-model指令专门用于双向数据绑定
    -->
    <input type="text" id="inText" v-model="msg"/>
</div>
<div id="d2">
    <span id="s2">{{ msg }}</span><br/>
    <input type="text" id="inText2" v-model="msg"/>
</div>
</body>
<script>
    new Vue({
        el: "#d1", // 指定关联的元素,即表示Vue的作用域
        data: {msg: "Hello Vue"}
    });
</script>
</html>